<template>
  <div class="component-selector">
    <div class="section-content">
      <div class="component-classifier">
        <div class="classes-bar">
          <div class="class-tabs">
            <div
              v-for="(item, index) in visComponentClasses"
              :key="index"
              class="class-tab class-btn"
              :active="index === currentClass"
              @click="currentClass = index"
            >
              <a-tooltip placement="left">
                <template slot="title">
                  <span>{{ item.title }}</span>
                </template>
                <a-icon-font :type="publicPath + item.iconCharCode" />
              </a-tooltip>
            </div>
          </div>
        </div>
        <div class="classes-content">
          <div style="width: 100%;">
            <a-input
              slot="content"
              v-model="search"
              allow-clear
              :style="{
                margin: '8px 8px 0 8px',
                width: 'calc(100% - 16px)',
              }"
              placeholder="filter"
            >
              <a-icon slot="prefix" type="search" />
            </a-input>
          </div>
          <div class="classes-cards">
            <div
              v-for="cp in visualComponents"
              :key="cp.visualization"
              :span="6"
              style="
                margin-bottom: 8px;
                min-width: 100%;
                position: relative;
                text-align: left;
              "
            >
              <card
                size="small"
                style="width: 100%;"
                draggable="true"
                @dragstart="handleComponentSelectDrag(cp, $event)"
              >
                <span
                  slot="title"
                  :style="{ 'font-weight': 600, color: '#5d637e' }"
                >
                  {{ cp.title || cp.visualization.replace('Component', '') }}
                </span>
                <img
                  alt=""
                  :style="{ height: '79px', width: '100%' }"
                  :src="cp.imgSrc"
                />
              </card>
              <div
                v-if="cp.disabled"
                style="
                  background-color: #00000020;
                  bottom: 0;
                  cursor: not-allowed;
                  left: 4px;
                  position: absolute;
                  right: 4px;
                  top: 0;
                "
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Card } from 'ant-design-vue'
import { Vue, Component } from 'vue-property-decorator'
import { publicPath } from '@/api/constants'

@Component({
  name: 'SystemComponentList',
  components: {
    Card,
  },
})
export default class SystemComponentList extends Vue {
  private publicPath = publicPath
  private currentClass: string = 'PieChart'
  private search: string = '' // the search input
  private visComponentClasses = {
    PieChart: { title: '饼图', iconCharCode: 'iconbingtu' },
    BarChart: { title: '柱状图', iconCharCode: 'icontiaoxing' },
    GroupBarChart: {
      title: '分组柱状图',
      iconCharCode: 'iconStackedBarChartbeifen',
    },
    HeatmapMatrix: { title: '热力图', iconCharCode: 'iconMatrixCopybeifen' },
    ParallelCoordinates: { title: '平行坐标轴', iconCharCode: 'icontuodong' }, // TODO 平行坐标轴的icon
    LineChart: { title: '线性图', iconCharCode: 'iconLineChartbeifen' },
    AreaChart: { title: '面积图', iconCharCode: 'iconmianjitu' },
    Scatterplot: { title: '散点图', iconCharCode: 'iconScatterplotbeifen' },
  }
  private availableComponents = [
    {
      visualization: 'PieChart',
      title: '饼图',
      class: 'PieChart',
      imgSrc:
        'https://platform-ng-dev.projects.zjvis.org/assets/components/饼状图.png',
    },
    {
      visualization: 'Doughnut',
      title: '环形图',
      class: 'PieChart',
      imgSrc: '',
    },
    {
      visualization: 'RosePlot',
      title: '玫瑰图',
      class: 'PieChart',
      imgSrc: '',
    },
    {
      visualization: 'BarChart',
      title: '柱状图',
      class: 'BarChart',
      imgSrc:
        'https://platform-ng-dev.projects.zjvis.org/assets/components/柱状图.png',
    },
    {
      visualization: 'GroupBarChart',
      title: '分组柱状图',
      class: 'GroupBarChart',
      imgSrc:
        'https://platform-ng-dev.projects.zjvis.org/assets/components/%E6%8A%98%E7%BA%BF%E5%9B%BE.png',
    },
    {
      visualization: 'StackBarChart',
      title: '堆栈柱状图',
      class: 'GroupBarChart',
      imgSrc: '',
    },
    {
      visualization: 'HeatmapMatrix',
      title: '基于透明度的热力图',
      class: 'HeatmapMatrix',
      imgSrc: '',
    },
    {
      visualization: 'ParallelCoordinates',
      title: '平行坐标轴图',
      class: 'ParallelCoordinates',
      imgSrc: '',
    },
    {
      visualization: 'LineChart',
      title: '线性图',
      class: 'LineChart',
      imgSrc:
        'https://platform-ng-dev.projects.zjvis.org/assets/components/折线图.png',
    },
    {
      visualization: 'AreaChart',
      title: '面积图',
      class: 'AreaChart',
      imgSrc: '',
    },
    {
      visualization: 'Scatterplot',
      title: '散点图',
      class: 'Scatterplot',
      imgSrc:
        'https://platform-ng-dev.projects.zjvis.org/assets/components/散点图.png',
    },
  ]

  public get visualComponents(): any {
    return this.availableComponents.filter((vc) => {
      if (this.search) {
        return vc.title.includes(this.search)
      }
      return !this.currentClass || vc.class === this.currentClass
    })
  }

  public handleComponentSelectDrag(cp: any, event: any): void {
    event.dataTransfer.setData('action', cp.disabled ? 'create' : 'create-vis')
    event.dataTransfer.setData('payload', cp.visualization)
  }
}
</script>

<style lang="less">
.component-selector {
  height: 100%;
  margin-top: -16px;
  position: relative !important;
  user-select: none;
  width: 100%;

  .component-classifier {
    display: flex;
    height: 100%;
    width: 100%;

    .classes-bar {
      background-color: #fff;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 100%;
      user-select: none;
      width: 42px;

      .class-btn {
        align-items: center;
        box-sizing: border-box;
        color: #9d9da8;
        cursor: pointer;
        display: flex;
        flex: 0 0 auto;
        font-size: 20px;
        height: 40px;
        justify-content: center;
        width: 42px;

        &:hover {
          background-color: fade(#f0f3ff, 50%);
          color: fade(#f9f9fc, 50%);
        }
      }

      .class-tabs {
        flex: 1;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 0;
        }

        .class-tab[active] {
          background-color: #f0f3ff;
          color: fade(#f9f9fc, 50%);
        }
      }
    }

    .classes-content {
      height: 100%;
      width: calc(100% - 42px);

      .classes-cards {
        box-sizing: border-box;
        height: calc(100% - 42px);
        overflow: auto;
        padding: 8px;
        width: 100%;

        &::-webkit-scrollbar {
          width: 0;
        }

        .ant-card-small > .ant-card-head {
          background-color: #f9faff;
          border-bottom: 0;
        }

        .ant-card-small > .ant-card-body {
          padding: 3px;
        }

        .component-btn {
          background: fade(#6671fe, 5%);
          border: 1px solid fade(#6671fe, 15%);
          border-radius: 2px;
          cursor: pointer;
          font-size: 32px;
          height: 34px;
          margin: 0.5rem;
          width: 34px;

          &:hover {
            border: 1px solid fade(#6671fe, 50%);
          }

          &.component-btn-active {
            border: 1px solid #6671fe;
          }
        }
      }
    }
  }
}

.icon-map {
  border: 1px solid #f00;
}
</style>
